<template>
  <view class="lamp-detail" :class="{ readonly: !canEdit }">
    <view class="tab-box">
      <view v-for="item in lampTabList" :key="item.code" class="tab-item" :class="{active: currTab === item.code}" @click="toggleTab(item)">{{item.name}}</view>
    </view>
    <view class="content-box">
      <operate v-show="currTab === LAMP_TAB.OPERATE" :projectInfo="projectInfo" ref="operate"></operate>
      <lamps v-show="currTab === LAMP_TAB.LAMPS" :projectInfo="projectInfo" ref="lamps"></lamps>
      <warnings v-show="currTab === LAMP_TAB.WARNINGS" :projectInfo="projectInfo" ref="warnings"></warnings>
	  <power v-show="currTab === LAMP_TAB.POWER" :projectInfo="projectInfo" ref="power"></power>
    </view>
  </view>
</template>

<script>
import Operate from './operate.vue'
import Lamps from './lamps.vue'
import Warnings from './warnings.vue'
import power from './power.vue'

const LAMP_TAB = {
  OPERATE: 'operate',
  GATEWAY: 'gateway',
  LAMPS: 'lamps',
  WARNINGS: 'warnings',
  POWER: 'power',
}
export default {
  props: {
    projectInfo: {
      type: Object
    }
  },
  components: {
    Operate,
    Lamps,
    Warnings,
	power
  },
  data() {
    return {
      LAMP_TAB,
      currTab: LAMP_TAB.OPERATE,
      lampTabList: [
        {
          code: LAMP_TAB.OPERATE,
          name: '操作'
        },
        {
          code: LAMP_TAB.LAMPS,
          name: '所有灯具'
        },
        {
          code: LAMP_TAB.WARNINGS,
          name: '异常灯具'
        },
        {
          code: LAMP_TAB.POWER,
          name: '原灯功率'
        }
      ]
    }
  },
  computed: {
    canEdit() {
      return this.projectInfo.canEdit
    }
  },
  methods: {
    initData() {
      const self = this
      const cases = {
        [LAMP_TAB.OPERATE]: self.$refs.operate,
        [LAMP_TAB.LAMPS]: self.$refs.lamps,
        [LAMP_TAB.WARNINGS]: self.$refs.warnings,
		[LAMP_TAB.POWER]: self.$refs.power,
      }
      cases[self.currTab].initData()
    },
    toggleTab(target) {
      if (this.currTab === target.code) return
      this.currTab = target.code
      if (target.code === LAMP_TAB.LAMPS) {
        this.startLampScan()
      } else {
        this.endLampScan()
      }
    },
    startLampScan() {
      if (this.currTab === LAMP_TAB.LAMPS) {
        this.$refs.lamps.startScan = true
        this.$refs.lamps.getSelectLamps()
      }
    },
    endLampScan() {
      this.$refs.lamps.startScan = false
      this.$refs.lamps.abortLongRequest()
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-box {
  display: flex;
  margin-bottom: 20rpx;
  overflow-x: auto;
  .tab-item {
    margin-right: 30rpx;
    background-color: $white;
    border: 2rpx solid $white;
    width: 150rpx;
    height: 60rpx;
    border-radius: 10rpx;
    font-size: $font-size-2;
    display: flex;
    align-items: center;
    justify-content: center;
    &.active {
      color: $primary;
      border-color: $primary;
      background-color: $primary-lighter;
    }
  }
}
</style>
